<template>
	<div :style="{ fontSize: fontSize }" class="mk-text">
		<span v-for="(item, index) in data" :key="index">
			<span :class="item.isStrong ? 'strong-text' : ''">
				{{ model[item.prop] }}</span>
			{{ index < data.length - 1 ? separator : '' }}
		</span>
	</div>
</template>
<script lang="ts" setup>
// 陈列信息组件
defineOptions({
	name: 'MkDisplayInformationText',
});
/**
 * props
 */
const props = defineProps({
	data: {
		type: Array<{ prop: string, isStrong: boolean }>,
		default: () => [],
	},
	model: {
		type: Object as PropType<{ [key: string]: any }>,
		default: () => ({})
	},
	separator: {
		type: String,
		default: '/'
	},
	fontSize: {
		type: String,
		default: '1rem'
	}
});

</script>
<style lang='scss' scoped>
.mk-text {
	letter-spacing: 1px;
	font-size: var(fontSize);
}

.strong-text {
	font-size: 1.15em;
	font-weight: bold;
}
</style>